<template>
    <van-nav-bar title="退货物流" left-arrow @click-left="back" />
    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>{{ orderInfo.status_text }}</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/assets/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 退货信息 -->
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                    v-model="addressText"
                    is-link
                    readonly
                    name="picker"
                    label="寄件地址"
                    placeholder="点击选择寄件地址"
                    @click="showPickerAddress = true"
                    :rules="[{ required: true, message: '请选择寄件地址' }]"
                    />
                    <van-field
                    v-model="expressText"
                    is-link
                    readonly
                    name="picker"
                    label="退货物流"
                    placeholder="点击选择退货物流"
                    @click="showPickerExpress = true"
                    :rules="[{ required: true, message: '请选择退货物流' }]"
                    />
                    <van-field
                    v-model="expresscode"
                    name="expresscode"
                    label="快递单号"
                    placeholder="请输入快递单号"
                    :rules="[{ required: true, message: '请填写用快递单号' }]"
                    />
                    <van-popup v-model:show="showPickerAddress" position="bottom">
                    <van-picker
                        :columns="addressList"
                        @confirm="onConfirmAddress"
                        @cancel="showPickerAddress = false"
                    />
                    </van-popup>
                    <van-popup v-model:show="showPickerExpress" position="bottom">
                    <van-picker
                        :columns="expressList"
                        @confirm="onConfirmExpress"
                        @cancel="showPickerExpress = false"
                    />
                    </van-popup>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                    提交
                    </van-button>
                </div>
            </van-form>
            

        </section>
    </section>
</template>

<script setup>

const { proxy } = getCurrentInstance()
const back = () => proxy.$router.push("/order/index");

// 表单数据
const addressText = ref('');
const expressText = ref('');
const expresscode = ref('780098068058');
const showPickerAddress = ref(false);
const showPickerExpress = ref(false);
let addressid = 0;
let expressid = 0;

const onConfirmAddress = ({ selectedOptions }) => {
    addressText.value = selectedOptions[0]?.text;
    addressid = selectedOptions[0]?.value;
    showPickerAddress.value = false;
};

const onConfirmExpress = ({ selectedOptions }) => {
    expressText.value = selectedOptions[0]?.text;
    expressid = selectedOptions[0]?.value;
    showPickerExpress.value = false;
};

onBeforeMount(()=>{
    getData()
    getExpress()
})

const orderid = proxy.$route.query.orderid?proxy.$route.query.orderid:"0"
const busid = proxy.$cookies.get("business")?proxy.$cookies.get("business").id:"0"
let orderInfo = ref({})
// 获得订单数据
const getData = async () => {
    let data = {
        orderid,
        busid
    }
    let result = await proxy.$POST({
        url:"/business/refundIndex",
        params:data
    })
    if(result.code){
        orderInfo.value = result.data
        return false
    }else{
        proxy.$fail(result.msg)
        return false
    }
}

// 获得所有快递公司数据和用户地址信息
let expressList = [];
let addressList = [];
const getExpress = async()=>{
    let result = await proxy.$POST({
        url:"/business/expressCompany",
        params:{busid}
    })
    if(result.code){
        expressList = result.data.express
        addressList = result.data.address
        return false
    }else{
        proxy.$fail(result.msg)
        return false
    }
} 



// 提交表单
const onSubmit = async () => {
    let data = {
        busid,
        orderid,
        addressid,
        expressid,
        expresscode:expresscode.value
    }
    let result = await proxy.$POST({
        url:"/business/refundProduct",
        params:data
    })
    if(result.code){
        proxy.$success({
            message:result.msg,
            duration:2000,
            onClose:()=>{
                proxy.$router.push("/order/index")
            }
        })
    }else{
        proxy.$fail(result.msg);
        return false
    }
}
</script>